<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <button class="back-arrow" @click="goBack"></button>
      <p>消费记录</p>
    </header>
    <p class="title">本周消费记录</p>
    <div ref="mychart" id="demoDiv"></div>
    <Footer></Footer>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Footer from "@/components/Footer.vue";
import request from '../request.js';
export default {
  name: 'Charts',
  data() {
    return {
      user: {},
      totalData: [] // 初始化totalData为空数组
    }
  },
  components: {
    Footer
  },
  created() {
    this.user = this.$getSessionStorage('user');
    request.get('orders/WeeklyTotalById',{ 
      params: {
        userId: this.user.userId,
   		}
    }).then(response => {
      this.totalData = response.data;
      this.fillMissingValues(); // 调用填充缺失值的方法
      this.drawChart();
    }).catch(error => {
      console.error(error);
    });
  },

  methods: {
    goBack() {
				console.log('Trying to go back...');
                this.$router.go(-1); // 相当于浏览器的后退操作
                },
    fillMissingValues() {
      const currentDate = new Date();
      const oneWeekAgo = new Date(currentDate.getTime() - 6 * 24 * 60 * 60 * 1000);

      // 创建包含所有日期的数组
      const dateRange = [];
      let dateIterator = new Date(oneWeekAgo);
      while (dateIterator <= currentDate) {
        dateRange.push(dateIterator.toISOString().split('T')[0]);
        dateIterator.setDate(dateIterator.getDate() + 1);
      }

      // 检查是否存在缺失的日期，并在totalData中添加缺失日期的对象，金额设为0
      dateRange.forEach(date => {
        const existingData = this.totalData.find(item => item.date === date);
        if (!existingData) {
          this.totalData.push({ date: date, amount: 0 });
        }
      });

      // 根据日期排序totalData
      this.totalData.sort((a, b) => new Date(a.date) - new Date(b.date));
    },
    drawChart() {
      let myEcharts = echarts.init(this.$refs.mychart);

      // 从totalData中提取日期和金额数据
      const dateList = this.totalData.map(item => item.date);
      const valueList = this.totalData.map(item => item.amount);

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: dateList
        },
        yAxis: {},
        series: [
          {
            type: 'line',
            data: valueList,
            smooth: true, // 开启平滑曲线
            itemStyle: {
              color: '#F08080'
            },
            label: {
              show: true,
              formatter: '{c}'
            }
          }
        ]
      };
      myEcharts.setOption(option);
    }
  }
};
</script>

<style scoped>

.wrapper header{
  width: 100%;
  height: 12vw;
  background:#0097ff;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;

}

.wrapper .title{
  margin-top: 18vw;
  margin-left: 4vw;
  font-size: 5vw;
  color: #666666;
  font-weight: 700;

}

.wrapper #demoDiv {
  width: 100%;
  height: 300px;
  margin-left: 2vw;
}

   /****************** 返回键 ******************/
 
   .back-arrow {
  position: fixed; /* 固定定位 */
  left: 2.5vw; /* 距离屏幕左端像素 */
  top: 2.5vw; /* 距离屏幕顶部像素 */
  width: 8vw; /* 使用视口宽度的百分比 */
  height: 8vw; /* 使用视口宽度的百分比，保持宽高比 */
  background-color: rgba(0, 151, 255, 0.5); /* 半透明的背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* 隐藏边框 */
  transition: background-color 0.3s ease; /* 背景颜色变化动画 */
}

.back-arrow::before {
  content: '\f053'; /* 使用 FontAwesome 的左箭头图标 */
  font-family: 'FontAwesome'; /* FontAwesome 字体 */
  font-size: 5vh; /* 使用视口高度的百分比，确保在不同设备上也合适 */
  color: #fff; /* 字体颜色 */
  transition: color 0.3s ease; /* 字体颜色变化动画 */
}

.back-arrow:hover::before {
  color: #0a2ddc; /* 鼠标悬停时的颜色变化 */
}

.back-arrow:hover {
  background-color: rgba(0, 151, 255, 0.3); /* 鼠标悬停时的背景颜色变化为更透明 */
}

</style>